/**
 * 消息页的评论组件
 */
<template>
	<div class="contactList">
		<!-- <div class="divide"></div> -->
		<div class="list" v-for="(item,index) of commentsLists" :key="index">
			<div v-if="item.article_info.content">
				<!-- 头部 -->
				<div class="list-top">
					<image :src="item.photo_url" class="list-logo" mode="aspectFill"></image>
					<div>
						<div class="list-name-wrapper">
							<div class="list-name">{{item.user_name}}</div>
							<image mode="widthFix" class="list-level" v-if="item.user_grade" :src="'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/LV'+item.user_grade+'.png'"/>
						</div>
						<div class="list-time">{{item.created_at}}</div>
					</div>
				</div>
				<div class="list-from ">
					<span v-html="item.content"></span>
				</div>
				<!-- 头部end -->
				<!-- 上次回复的内容 -->
				<template v-if="item.article_info.content">
					<div class="list-last-msg" @click.stop="toPostDetails(item)">
						<div class="list-thumb">
							
							<image mode="aspectFill" :src="item.article_info.img_url_array[0]" v-if="item.article_info.img_url_array.length!=0"></image>
							<div class="video-wrapper" v-else-if="item.article_info.video_url_array.length!=0">
								<cover-image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/video.png"></cover-image>
								<video :src="item.article_info.video_url_array[0]" :controls="false" ></video>
							</div>
							<image mode="aspectFill" :src="item.article_info.photo_url" v-else></image>
						</div>
						<div class="list-content">
							<u-parse class="list-content-text-a"  :content="item.article_info.content" @preview="preview" @navigate="navigate" />
						</div>
					</div>
					<!-- 上次回复的内容end -->
					<div class="list-bottom">
						<div class="name">{{item.article_info.circle_name||''}}</div>
						<div class="btn" @click="showInput(item)">
							<image src="../../../../static/img/huifu.png"/>
							<div >回复</div>
						</div>
						
					</div>
				</template>
				<!-- <template v-else>
					<div>该帖子已被删除</div>
				</template> -->
			</div>
		</div>
		<div v-if="inputShow">
			<indexPut 
			:showPicture="false"
			 :addFlag="false"
			  :showCamera="false"
			   :IndexputInfo.sync="indexputInfo"
			   @getComment="getComment"
			   ></indexPut>
		</div>
		
	</div>
</template>

<script>
	let defaultJpg=require('../../../../static/img/quan-active.png');
	import indexPut from "@/pages/components/inputbar/indexput.vue";
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		name:'contactList',
		components:{
			indexPut,
			uParse
		},
		props:['commentsList'],
		data() {
			return {

				post:'',//选中的评论
				inputShow:false,
				defaultJpg:defaultJpg,
				indexputInfo: {
				    post_article_id : '',
				    type: '',
				    user_id: '',
				    comment_id: ''
				},
			};
		},
		computed:{
			commentsLists:{
				get:function(){
					let arr=this.commentsList.map(item=>{
						let newItem=item;
						newItem.created_at=this.formatTime(item.created_at);
						if(item.article_info){
							let content=this.formEmoji(item.article_info.content).content
							content=`<div style="color:#6F7073">${content}</div>`
							newItem.article_info.content=content
						}
						
						newItem.content=this.formEmoji(item.content).content;
						
						return newItem
						// return Object.assign(item,{created_at:this.formatTime(item.created_at)})
					})
					return arr
				},
				set:function(val){
					this.commentsLists=val
				}
			},
		},
		methods:{
			preview(src, e) {
			      // do something
			    },
			navigate(href, e) {
			  // do something
			  uni.navigateTo({
			  	url:href
			  })
			},
			formatTime(time){
				let timeArr=time.split(' ');
				let normalizeYear=timeArr[0].split('-');
				let normalizeTime=timeArr[1].split(':');
				return `${normalizeYear[1]}-${normalizeYear[2]} ${normalizeTime[0]}:${normalizeTime[1]}`
			},
			formEmoji(text){
				let pattern=/<img.*?alt="(.*?)".*?>/gi;
				return {content:text.replace(pattern,'$1')}
			},
			getComment(item){
				this.commentsLists.unshift(item)
			},
			showInput(post){
				//弹出评论框
				this.inputShow=true;
				this.indexputInfo={
					post_article_id:post.post_article_id,
					type:'reply',
					user_id:post.user_id,
					comment_id:post.id
				}
				console.log(this.indexputInfo)
			},
			toPostDetails(item){
				//跳转帖子
				console.log(item)
				uni.navigateTo({
					url:`/pages/Details/postdetails?post_article_id=${item.post_article_id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '~@/static/scss/mixin.scss';
	.contactList{
		background: #F1F4F7;
		// .divide{
		// 	height: 1rpx;
			
		// }
	}
	.list{
		padding:0 30rpx;
		margin:20rpx 0;
		background-color: #fff;
		.list-top{
			@include flex(flex-start);
			padding-top: 20rpx;
			.list-name-wrapper{
				@include flex()
			}
			.list-logo{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 30rpx;
			}
			.list-level{
				width: 56rpx;
				height: 56rpx;
				display: inline-block;
				margin-left:10rpx

			}
			.list-time{
				color:gray;
				margin:10rpx 0;
				font-size: 22rpx;
				
			}
		}
		.list-from{
			@include flexWrap(flex-start);
			margin:20rpx 0;
			font-weight: blod;
			font-size: 24rpx;
			
		}
		.list-last-msg{
			@include flex(flex-start);
			background: #F7F7F7;
			border-radius:16rpx ;
			overflow: hidden;
			// border-radius: 10rpx;
			// padding:40rpx 10rpx;
			// color: #eee;
			// font-size: 28rpx;
			.list-thumb{
				margin:0 20rpx 0 0;
				.video-wrapper{
					position: relative;
					cover-image{
						position: absolute;
						width:50rpx;
						height: 50rpx;
						z-index:88;
						top:50%;
						left:50%;
						margin-left:-25rpx;
						margin-top:-25rpx;
					}
				}
				image{
					width:100rpx;
					height: 100rpx;
				}
				video{
					width:100rpx;
					height: 100rpx;
				}
			}
			.list-content{
				@include flex(flex-start);
				image{
					width:80rpx;
					height: 80rpx;
				}
				.list-content-name{
					margin-left: 20rpx;
				}
			}
		}
		.list-bottom{
			@include flex(space-between);
			margin:20rpx 0;
			font-size: 24rpx;
			color:#BBBCBF;
			padding-bottom: 20rpx;
			image{
				width: 30rpx;
				height: 30rpx;
				margin:0 10rpx;
			}
			.btn{
				@include  flex();
			}
			
		}
		
	}
</style>
<style>
	
	.list-content-text-a{
		width: 100%;
		bakckground:#F7F7F7;
		/* min-height: 120rpx; */
		max-height: 65rpx;
		font-size: 24rpx;
		line-height: 32rpx;
		overflow: hidden;
		display: -webkit-box;
		  -webkit-box-orient: vertical;
		  -webkit-line-clamp: 2;
	}
	
	.list-from rich-text{
		font-size: 32rpx;
		line-height:48rpx;
	}
</style>
